<template>
    <!--申请 只读审批12步-->
    <div style="position: relative;width: 100%">
        <Steps :current="currentTab" id="TitleReadOnly">
            <Step title="家庭信息" content="" @click.native="clickStep(0)"></Step>
            <Step title="家庭成员" content="" @click.native="clickStep(1)"></Step>
            <Step title="基础收入" content="" @click.native="clickStep(2)"></Step>
            <Step title="基础支出" content="" @click.native="clickStep(3)"></Step>
            <Step title="赡抚扶养" content="" @click.native="clickStep(4)"></Step>
            <Step title="基础财产" content="" @click.native="clickStep(5)"></Step>
            <Step title="财产房产" content="" @click.native="clickStep(6)"></Step>
            <Step title="工作单位" content="" @click.native="clickStep(7)"></Step>
            <Step title="教育情况" content="" @click.native="clickStep(8)"></Step>
            <Step title="家庭附件" content="" @click.native="clickStep(9)"></Step>
            <Step title="分类救助" content="" @click.native="clickStep(10)"></Step>
            <Step title="提交信息" content="" @click.native="clickStep(11)"></Step>
        </Steps>
        <div id="ContentReadOnly">
            <step1 v-if="currentTab === 0" ref="step1"/>
            <step2 v-if="currentTab === 1"/>
            <step3 v-if="currentTab === 2"/>
            <step4 v-if="currentTab === 3"/>
            <step5 v-if="currentTab === 4"/>
            <step6 v-if="currentTab === 5"/>
            <step7 v-if="currentTab === 6"/>
            <step8 v-if="currentTab === 7"/>
            <step9 v-if="currentTab === 8"/>
            <step10 v-if="currentTab === 9" ref="step10"
                    :validateCode.sync="validateCode"
                    :validateMsg.sync="validateMsg"/>
            <step11 v-if="currentTab === 10"/>
            <step12 v-if="currentTab === 11"/>
        </div>
    </div>
</template>

<script>
    import step1 from '../ss11_view_steps/application1'
    import step2 from '../ss11_view_steps/application2'
    import step3 from '../ss11_view_steps/application3'
    import step4 from '../ss11_view_steps/application4'
    import step5 from '../ss11_view_steps/application5'
    import step6 from '../ss11_view_steps/application6'
    import step7 from '../ss11_view_steps/application7'
    import step8 from '../ss11_view_steps/application8'
    import step9 from '../ss11_view_steps/application9'
    import step10 from '../ss11_view_steps/application10'
    import step11 from '../ss11_view_steps/application11'
    import step12 from '../ss11_view_steps/application12'

    import '@/views/common/css/common.css';

    export default {
        name: "index",
        components: {
            step1,
            step2,
            step3,
            step4,
            step5,
            step6,
            step7,
            step8,
            step9,
            step10,
            step11,
            step12
        },
        watch:{
            validateCode(newvalue,oldvalue){
                this.validateCode = newvalue
                //子组件传值给父组件
                this.$emit("update:validateMsg", this.validateMsg)
                this.$emit("update:validateCode", this.validateCode)
            },
            validateMsg(newvalue,oldvalue){
                this.validateMsg = newvalue
                //子组件传值给父组件
                this.$emit("update:validateMsg", this.validateMsg)
                this.$emit("update:validateCode", this.validateCode)
            }
        },
        data() {
            return {
                validateCode: true, //第十步附件 验证code： true(验证通过)  false(验证失败)
                validateMsg: '',//第十步附件验证失败提示信息
                currentTab: 999,
                familyInfo: {}
            }
        },
        methods: {
            edit(record) {
                this.familyInfo = Object.assign({}, record);
                this.currentTab = 0;
            },
            clickStep(currentTab) {
                this.currentTab = currentTab
            },
        },

    }
</script>

<style scoped>
    #ContentReadOnly {
        position: relative;
        width: 100%;
        /*overflow: auto;*/
        margin-top: 10px;
        min-height: 400px;
    }

    #TitleReadOnly {
        position: relative;
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #ddd;
    }

    /deep/ .ivu-steps-item {
        cursor: pointer;
    }

</style>
